<template>
  <div class="list" v-infinite-scroll="() => instance.getPageByPhone()" :infinite-scroll-disabled="disabled">
    <template v-for="(data, index) in list" :key="index">
      <div class="item">
        <slot :data="data" :index="index"></slot>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts" generic="T extends Record<string, any>">
import { List } from "@b/model/base/list";
import { computed } from "vue";

interface prop {
  list: T[];
  instance: List<T>;
  title?: string;
}
const { instance, list = [] } = defineProps<prop>();
const disabled = computed(() => instance.loading || !instance.has_next);
const spance = computed(() => instance.spance / 2 + "px");
defineEmits<{
  (e: "about", data: T, index: number): void;
}>();
</script>
<style scoped>
.item {
  padding-top: v-bind(spance);
  padding-bottom: v-bind(spance);
}
</style>
